<template>
	<view>

		<view style="padding-top: 40rpx;">
			<view v-for="(item, index) in list" :id="item.id">
				<!-- <view class="bg" :style="{backgoundImage: 'url('+item.img + ')'}"> -->

				<view class="context">
					<image :src="item.img" mode="widthFix" @click="toDetail(item)"></image>
					<view class="text" @click="toDetail(item)">
						<view class="title">
							{{(item.title.length > 25) ? (item.title.substr(0,24) + '...') : item.title}}
						</view>
						<view class="summary">
							{{(item.summary.length > 39) ? (item.summary.substr(0,39) + '...') : item.summary}}
						</view>
					</view>
					<view class="context-main">
						<view class="tags">
							<view class="tag-item" v-for="tag in item.tags" :id="tag.id" @click="toTagProduct">
								<text>{{tag.title}}</text>
							</view>
						</view>
						<view class="like" :key="item.id" @click="like(item)">
							<text class="num" :style="'color:' + item.liked ? '#ff8785' : '#137C92'">{{item.like}}</text>
							<view class="liek-icon" :id="item.id" :key="item.id" :animation="item.liked ? animationObj : ''">
								<uni-icons :type="item.liked ? 'heart-filled': 'heart'" :color="item.liked ? '#ff8785' : '#137C92'" size="24"></uni-icons>
							</view>
						</view>
					</view>

					<!-- </view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"

	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				list: [],
				to: {},
				animationObj: {},
				iconColor: '#137C92',
				iconType: 'heart'
			}
		},
		methods: {
			init() {
				let that = this
				this.get('product/getBySort', null, function(res) {
					that.list = res.data.list
				})
			},
			toDetail(item) {
				// uni.showLoading({
				// 	title: '言裳集',
				// 	mask: true,
				// 	success() {
				uni.navigateTo({
					url: `../detail/detail?id=${item.id}`,
					animationType: "zoom-fade-out",
					animationDuration: 500,
					// success() {
					// 	uni.hideLoading()
					// }
				})
				// }
				// });
			},
			toTagProduct() {
				uni.navigateTo({
					url: "../products/products",
					animationType: 'slide-in-right'
				})
			},
			like(item) {
				// todo:发送用户喜欢的请求 get
				if (!item.liked) {
					this.flipAndEnlarge()
					item.like++
				} else {
					item.like--
				}
				item.liked = !item.liked
			},
			// 翻转放大动画
			flipAndEnlarge() {
				this.animation.rotateY(180).opacity(0.5).scale(1.42222, 1.42222).opacity(0.1).step()
				this.animation.rotateY(0).opacity(1).scale(1, 1).step()
				this.animationObj = this.animation.export()
			},
			judgeLogin() {
				var loginStatus = uni.getStorageSync('login-status')
				uni.getStorage({
					key: 'user-obj',
					success: res => {
						uni.showToast({
							title: `欢迎回来，${res.data.nickname}`,
							icon: 'none'
						})
					}
				})
				if (!loginStatus) {
					uni.navigateTo({
						url: '../login/login',
						animationType: 'slide-in-left'
					})
				}
			}
		},
		onShow() {
			var animation = uni.createAnimation({
				transformOrigin: "50% 50% 0",
				delay: 0,
				duration: 330,
				timingFunction: 'ease'
			})
			this.animation = animation
		},
		onUnload() {
			clearTimeout(this.to)
		},
		onLoad() {
			this.init()
			this.judgeLogin()
		},
		onReachBottom() {
			this.list = [...this.list, ...this.list]
		},
		onPullDownRefresh() {
			this.init()
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.context {
		box-shadow: 0px 0px 20px rgba(10, 16, 20, .1), 0px 0px 8px 5px rgba(10, 16, 20, .08);
		// box-shadow: 0px 0px 20rpx rgba(0,0,0,0.3);
		// 0px 0px 20px rgba(0,0,0,0.1) inset;
		text-decoration: none;
		margin: 50rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		// position: absolute;
		// width: calc(50% - 30rpx);
		background-color: #FFFFF;
		overflow: hidden;
		border-radius: 20rpx;

		// z-index: 2;
		// filter: blur(20px)
		image {
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
			width: 100%;
		}

		.text {
			padding: 25rpx;

			.title {
				font-size: $uni-font-size-lg;
				font-weight: 600;
				line-height: 60rpx;
			}

			.summary {
				font-size: $uni-font-size-sm;
				color: $uni-text-color-grey;
				line-height: 40rpx;
			}
		}

		.context-main {
			padding: 0px 25rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-bottom: 30rpx;
			align-items: center;

			.like {
				display: flex;
				align-items: center;
				flex-direction: row;

				.num {
					height: 40rpx;
					font-size: 22rpx;
					line-height: 40rpx;
					color: #137C92;
					padding-right: 15rpx;
				}

				.liek-icon {
					height: 40rpx;
					line-height: 40rpx;
					width: 40rpx;
					text-align: center;
					// background-color: #137C92;
				}
			}

			.tags {
				display: inline-flex;

				.tag-item {
					height: 40rpx;
					padding: 0 20rpx;
					margin-right: 20rpx;
					font-size: 18rpx;
					line-height: 40rpx;
					color: #137C92;
					border: #137C92 solid 1rpx;
				}
			}
		}
	}
</style>
